<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <c:set var="root" value="${pageContext.request.contextPath}"/>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Lowin</title>
    <link rel="stylesheet" href="${root}/static/css/auth.css">


</head>

<body>

<div class="lowin">
    <div class="lowin-brand">
        <img src="${root}/static/images/kodinger.jpg" alt="logo">
    </div>
    <div class="lowin-wrapper">

        <div class="lowin-box lowin-register">
            <div class="lowin-box-inner">
                <form id="registerform" action="${root}/register">
                    <p>创建帐户</p>
                    <div><span style="color: red">${msg}</span></div>
                    <p id="nameMsg"></p>
                    <div class="lowin-group">
                        <label>用户名</label>
                        <input type="text" name="username" autocomplete="name" id="username" class="lowin-input" placeholder="请输入用户名" onblur="checkName()">
                    </div>
                    <div><span style="color: red">${pwdMsg}</span></div>
                    <div class="lowin-group">
                        <label>密码</label>
                        <input type="password" name="password" autocomplete="current-password" id="password" class="lowin-input"  placeholder="请输入密码" onblur="checkWord()">

                    </div>
                    <div class="lowin-group">
                        <label>确认密码</label>
                        <input type="password" name="password1" autocomplete="current-password" id="password1" class="lowin-input"  placeholder="请确认密码"onblur="checkPassword()">
                        <span id="mima"></span>
                    </div>
                    <button class="lowin-btn" onclick="userRegister()">
                        注册
                    </button>

                    <div class="text-foot">
                        已有帐户? <a href="" class="login-link">登录</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="lowin-box lowin-login">
            <div class="lowin-box-inner">
                <form action="${root}/register" method="post">
                    <p>Sign in to continue</p>
                    <div class="lowin-group">
                        <label>用户名 <a href="#" class="login-back-link">登录?</a></label>
                        <input type="email" autocomplete="email" name="email" class="lowin-input">
                    </div>
                    <div class="lowin-group password-group">
                        <label>密码 <a href="#" class="forgot-link">忘记密码?</a></label>
                        <input type="password" name="password" autocomplete="current-password" class="lowin-input">
                    </div>
                    <button class="lowin-btn login-btn">
                        登录
                    </button>

                    <div class="text-foot">
                        没有账户? <a href="" class="register-link">注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <footer class="lowin-footer">
        Design By @itskodinger. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
    </footer>
</div>

<script src="${root}/static/js/auth.js"></script>
<script src="${root}/static/jquery/jquery-2.2.4.min.js"></script>

<script>
    Auth.init({
        login_url: '#login',
        forgot_url: '#forgot'
    });


    function userRegister() {
        $("#registerform").submit();

    }

    function checkName() {
        var username = $("#username").val();
        var msg = $("#nameMsg");

        $.ajax({
            url:"${root}/check",
            type:"POST",
            data:"username="+username,
            error:function (data) {

            },
            success:function (data) {
                if(data == "true"){
                    msg.html("用户名可以使用");
                    msg.css({"color":"green"});
                }else{
                    msg.html("用户名不可以使用");
                    msg.css({"color":"red"});
                }
            }
        })
    }

</script>
</body>
</html>